<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>js实现层次选择器</title>
	<style type="text/css">
        #total{
           width:1000px;
           margin:0 auto;
        }
		.main{
			border:2px red solid;
			width: 1000px;
			height:300px;
		}
		.selecta,.selectb{
            vertical-align: top;
			display: inline-block;
			border:2px red solid;
			margin:5px;
			width: 40%;
			height:150px;
		}
    .blue{
      background-color: blue;
    }
    /*.main ul{
      background-color: red;
    }*/
	</style>
</head>
<body>
    <div id="total">
        <div class="main" id="main">
         	 <div class="selecta" id="js">
         	 	    <div class="blue">xxx</div>
         	 </div>
         	 <div class="selectb" id="jq">
         	 	    <div class="blue">xxx</div>
         	 </div>
        </div>

        <div class="main">
        	<ul id="xxx">
        		<li>xxx</li>
        		<li>xxx</li>
        		<li>xxx</li>
        	</ul>
        </div>

        <div class="main">
          <ul id="xxx">
            <li>xxx</li>
            <li>xxx</li>
            <li>xxx</li>
          </ul>
        </div>

        <input type="button" value="通过层次获取" id="pkq">
        <input type="button" value="模拟重载" id="mncza">
        <input type="button" value="模拟重载" id="mnczb">

        <div id="parent" class="main">
            <h3 id="showWay">节点遍历</h3>
            <ul class="level-1">
              <li class="item-i">class="item-i" li</li>
              <li class="item-ii">class="item-ii" li
                <ul class="level-2">
                  <li class="item-a">class="item-a" li</li>
                  <li class="item-b">class="item-b" li
                    <ul class="level-3">
                      <li class="item-1">class="item-1" li</li>
                      <li class="item-2">class="item-2" li</li>
                      <li class="item-3">class="item-3" li</li>
                    </ul>
                  </li>
                  <li class="item-c">class="item-c" li</li>
                </ul>
              </li>
              <li class="item-iii">class="item-iii" li</li>
            </ul>

            <div id="choose">
                <select id="choosea">
                    <option>遍历方式</option>
                    <option>parent</option>
                    <option>parents</option>
                    <option>parentUntil</option>
                </select>

                <input type="text" id="chooseb" placeholder="请输入有效信息">
                <button id="DomGo">DomGo</button>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="ByLevel.js"></script>
    <script type="text/javascript" src="DomQuery.js"></script>
    <script type="text/javascript">
         document.getElementById("pkq").onclick=function(){
           	var a=getElementByLevel("#main div");
            for(n=0;n<a.length;n++){
                a[n].style.backgroundColor="red";   
            }
            // a.style.backgroundColor="red"; 
            console.log(a);
         }

         function mncz(){
         	var a=arguments;
         	if(a.length==2){
         		console.log(a[1]);
         	}
         	else if(a.length==1){
 				var checka=/(\w|\s)(>){1}(\w|\s)/i;
 				if(checka.test(a[0])){
 					console.log("正确");
 				}
 				else{
 					console.log("错误");
 				}
         	}
         }
         document.getElementById("mncza").onclick=function(){
         	 mncz(1,2);
         };
         document.getElementById("mnczb").onclick=function(){
         	mncz("a!> b");
         }

         // var a=new Array();
         // a=document.getElementsByTagName("div");
         // console.log(a);
    </script>
</body>
</html>